import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count:0
  },
  // Mutation修改全局数据
  // 只能通过mutation变更store数据，不可以直接操作store中的数据
  // 通过这种方式虽然操作起来稍微繁琐，但可以集中监听所有数据的变化
  mutations: {
    // 不要在mutations里面执行异步操作
    add(state){
      state.count ++
    },
    // 传参方法
    addN(state,step){
      state.count += step
    },
    sub(state){
      state.count --
    },
    subN(state,step){
      state.count -= step
    }

  },
  actions: {
    // 执行异步操作方法
    // 在action中不能直接修改state的数据，必须用mutation里面的函数，用context.commit里面
    addAsync(context){
      setTimeout(()=>{
        context.commit('add')
      },2000)
    },
    addAsyncN(context,step){
      setTimeout(()=>{
        context.commit("addN",step)
      },1000)
    },
    subAsync(context){
      setTimeout(()=>{
        context.commit('sub')
      },1000)
    },
    subAsynsN(context,step){
      setTimeout(()=>{
        context.commit('subN',step)
      },1000)

    }
  },
  getters:{
    showNumber(state){
      return '当前最新的数量是'+state.count
    }
  },

  modules: {
  }
})
